<template>
  <el-dialog
    v-model="dialog.visible"
    :title="dialog.title"
    width="1000"
    @close="closeDialog"
  >
    <el-table :data="PageResult">
      <el-table-column label="序号" width="50px" align="center">
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="组织" align="center" prop="org" />
      <el-table-column label="物料编码" align="center" prop="Code" />
      <el-table-column label="IFA" align="center" prop="IFA" />
      <el-table-column label="名称" align="center" prop="Name" />
      <el-table-column label="规格" align="center" prop="SPECS" />
    </el-table>
    <pagination
      v-model:total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="handleQuery"
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button type="success" @click="handleExcel">导出</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { getBOMErr } from "@/api/forecast";
import * as XLSX from "xlsx";

defineOptions({
  name: "IFAErr",
  inheritAttrs: false,
});

// onMounted(() => {
//   handleQuery();
// });

defineExpose({
  closeDialog,
  openDialog,
  handleQuery,
});

const PageResult = ref([]);
let queryParams = {
  pageNum: 1,
  pageSize: 10,
};
let total = ref(0);
// 弹窗对象
const dialog = reactive({
  visible: false,
  type: "form",
  width: 800,
  title: "",
});
/** 关闭弹窗 **/
function closeDialog() {
  dialog.visible = false;
}
/** 开启弹窗 **/
function openDialog(title: string) {
  dialog.title = title;
  dialog.visible = true;
}
/** 分页 **/
function handleQuery() {
  getBOMErr(queryParams).then((res) => {
    PageResult.value = res.data.list;
    total.value = res.data.total;
  });
}
/**  导出Excel **/
async function handleExcel() {
  getBOMErr({ pageNum: 1, pageSize: 100000 }).then((res) => {
    const data = XLSX.utils.json_to_sheet(res.data.list); //此处tableData.value为表格的数据
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, data, "物料信息"); //test-data为自定义的sheet表名
    XLSX.writeFile(wb, "出错物料信息.xlsx"); //test.xlsx为自定义的文件名
  });
}
</script>

<style scoped></style>
